{% extends 'learning_logs/base.html' %}

{% block header %}
    <h2>{{ user.username }}升级 {{ topic }} 环境</h2>
{% endblock header %}

{% block content %}
    <p id="env_id" hidden="hidden">{{ topic.id }}</p>
    {% for entry in entries %}
        <div class="panel panel-default">
            <div class="panel-body">
                {{ entry.text|linebreaks }}
            </div>
        </div> <!-- panel -->
    {% empty %}
        There are no entries for this topic yet.
    {% endfor %}
    <form method="post" action="{% url 'upgrade:reset' topic.id %}">
<!--        {% csrf_token %}-->
        env username   <input type="text" name="username" value="root"><br>
        env password   <input type="text" name="password" value="root"><br>
        <input type="submit" name="action" value="reset">
        <input type="submit" name="action" value="stop"><br>
    </form>
    {% for key, value in data.items %}
    {{ key }} : {{ value }}<br>
    {% endfor %}
    <div id="bar" style="width:1000px; height:600px;"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script>
        var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
        var old_data = [];

<!--        var dom = document.getElementById("container");-->
<!--        var chart = echarts.init(dom);-->
        var option;
        option = {
            series: [{
                type: 'gauge',
                progress: {
                    show: true,
                    width: 18
                },
                axisLine: {
                    lineStyle: {
                        width: 18
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    length: 15,
                    lineStyle: {
                        width: 2,
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: 25,
                    color: '#999',
                    fontSize: 20
                },
                anchor: {
                    show: true,
                    showAbove: true,
                    size: 25,
                    itemStyle: {
                        borderWidth: 10
                    }
                },
                title: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    fontSize: 80,
                    offsetCenter: [0, '70%']
                },
                data: [{
                    value: 0
                }]
            }]
        };


        chart.setOption(option);

        $(
            function () {
                fetchData(chart);
                setInterval(fetchData, 2000);
            }
        );

        function fetchData() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/upgrade/line",
                data:{
                    "env_id": $("#env_id").text(),
                },
                dataType: 'json',
                success: function (result) {
                    var options = chart.getOption();
                    options.series[0].data[0].value = result.data.value;
                    chart.setOption(options);
                    old_data = chart.getOption().series[0].data;
                }
            });
        }

    </script>
{% endblock content %}